<template>
  <div>
    <el-card>
      <!-- 搜索 添加 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="请输入内容" v-model="queryInfo" clearable @clear="getAdminList">
            <el-button slot="append" icon="el-icon-search" @click="getAdminList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showEditDialog(null,null,1)">添加管理员</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="adminlist" border stripe :key="updateKey">
        <!-- stripe: 斑马条纹
        border：边框-->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="role_name" label="角色">
          <template slot-scope="scope">
            <span v-if="scope.row.roleid === 4">超级管理员</span>
            <span v-else-if="scope.row.roleid === 3">普通管理员</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value= 1
              inactive-value= 0
              active-text="账号可用"
              v-model="scope.row.state" @change="adminStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="信息修改"
              :enterable="false"
              placement="top"
            >
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              v-on:click="showEditDialog(scope.row,scope.index,2)"
            ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              :enterable="false"
              placement="top"
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="removeUserById(scope.row.id,scope.$index)"
            ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="账号管理" :visible.sync="editDialog" width="35%" center>
        <el-form :model="addAdminForm" :rules="rules" ref="AdminForm">
          <el-form-item label="用户名" label-width="150px"
                        prop="username">
            <el-col :span="200">
              <el-input v-model="addAdminForm.username" autocomplete="off" maxlength="15" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="密码" label-width="150px"
                        prop="password">
            <el-col :span="200">
              <el-input v-model="addAdminForm.password" type="password" autocomplete="off" maxlength="15" clearable></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="权限" label-width="150px" >
            <el-col :span="200">
              <el-select v-model="addAdminForm.roleid" placeholder="请选择">
                <el-option label="业务管理员":value= 3></el-option>
                <el-option label="超级管理员":value= 4></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog = false">取 消</el-button>
          <el-button type="primary" v-on:click="handleSave('AdminForm')">确 定</el-button>
        </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
    export default {
        data() {
          return {
            queryInfo: '',
            updateKey: 0,
            adminlist: [],
            editDialog: false,
            usebutton: true,
            rowtemp: [],
            index: 0,
            adminstate:{
              state: 1,
              reason: '',
              other: ''
            },
            disableInfo:{
              id:'',
              reason:'',
              other: ''
            },
            addAdminForm: {
              id:'',
              username: '',
              password: '',
              roleid: 3,
              flag: 0
            },
            rules: {
              username: [
                {required: true, message: '账号不可为空', trigger: 'blur'}
              ],
              password: [
                {required: true, message: '密码不可为空', trigger: 'blur'}
              ]
            },
          }
        },
        methods:{
          getAdminList(){
            this.$axios
            .get("/getadminlist",{
              params:{
                username: this.queryInfo
              }
            })
            .then(res =>{
                this.adminlist = res.data.data;
                console.log(res.data.data);
            })
          },
          adminStateChanged(row){
              this.$axios
              .get("/updatestate",{
                params:{
                  id: row.id,
                  state: row.state
                }
              }).then(
                res =>{
                  console.log(res.data.code);
                }
              )
          },
          showEditDialog(row,index,flag){
            this.editDialog = true;
            this.$refs.AdminForm.resetFields();
            if(flag === 1){
              this.addAdminForm = {
                username: '',
                password: '',
                roleid: 0,
                flag: 0
              };
              this.addAdminForm.flag = 1;
              this.addAdminForm.roleid = 3;
            }else {
              this.addAdminForm.username = row.username;
              this.addAdminForm.password = row.password;
              this.addAdminForm.roleid = row.roleid;
              this.addAdminForm.flag = 2;
              this.rowtemp = row;
              this.index = index;
            }

          },
          showSetState(row){
            this.dialogFormVisible = true;
            this.rowtemp = row;
          },
          removeUserById(row,index){
            console.log(row);
            this.$confirm("确认删除该账号？",{
              cancelButtonText: "取消",
              confirmButtonText: "确定",
              type: "warning"
            })
              .then(() =>
              this.$axios
              .get("/deleteAdmin", {
                params:{
                  id: row
                }
              })
              .then(res =>{
                if(res.data.code === 200){
                  this.$message({
                    type:"success",
                    message: "删除成功"
                  });
                  console.log(index);
                  this.adminlist.splice(index,1);
                  console.log(this.adminlist);
                  this.updateKey = Math.random();
                }else {
                  this.$message({
                    type:"warning",
                    message: "删除失败"
                  })
                }
              })
            )
          },
          handleSave(AdminForm){
            this.$refs[AdminForm].validate((valid) => {
              if (valid) {
                this.addAdminForm.id = this.rowtemp.id;
                this.$axios
                  .post("/editAdmin",this.addAdminForm)
                  .then(res =>{
                    if(res.data.code === 200){
                      this.editDialog = false;
                      this.$message({
                        type: "success",
                        message: "操作成功"
                      });
                      this.getAdminList();
                      this.addAdminForm = {
                        username: '',
                        password: '',
                        roleid: 0,
                      };
                      this.updateKey = Math.random();
                    }else {
                      this.editDialog = false;
                      this.$message({
                        type: "error",
                        message: res.data.msg
                      });
                    }
                  })
                }
            })
          }
        },
      mounted() {
          this.getAdminList();
      }
    }
</script>

<style scoped>

</style>
